import React, { Component,useState } from 'react'
import {Route,NavLink,Switch,Redirect,useRoutes,Link,Outlet} from 'react-router-dom'
import routes from '../../../routers'
import Detail from './Detail/Detail'

export default function Msg(){
  const [msgObj,setmsgObj]=useState([
    {id:1,title:'Msg000'},
      {id:2,title:'Msg111'},
      {id:3,title:'Msg222'},
  ])
  return (
    <div>
      <ul>
        {
          msgObj.map(val=>{
            return(
              <li key={val.id}>
                {/* 向路由组件传递params参数 */}
                <Link to={`datail/${val.id}/${val.title}`}>{val.title}</Link>
                {/* 向路由传递search参数 */}
                {/* <Link to={`/home/msg/datail?id=${val.id}&title=${val.title}`}>{val.title}</Link> */}
                {/* 向路由传递state参数 replace替换历史记录栈中最新的一条数据，区别于push*/}
                {/* <Link replace to={{pathname:'/home/msg/datail',state:{id:val.id,title:val.title}}}>{val.title}</Link> */}
                <Link replace to='datail' state={{id:val.id,title:val.title}}>{val.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <div style={{height:'20px'}}></div>
      {/* 组件接收params参数 */}
      {/* <Route path='/home/msg/datail/:id/:title' component={Detail} /> */}
      {/* search,state传递参数无需定义 */}
      {/* <Route path='/home/msg/datail' component={Detail} /> */}
      <Outlet/>
    </div>
  )
}
